<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/quesManage' }">问卷列表</el-breadcrumb-item>
            <el-breadcrumb-item>问卷详情</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="header" style="margin-top: 20px;font: 18px large;">
            问卷名称：
            <span>{{paperData.title}}</span>
        </div>
        <div class="header" style="margin-top: 20px;font: 15px Extra Small;display: inline-block" >
            问卷描述：
            <span>{{paperData.descri}}</span>
        </div>
        <el-button style="float:right;margin-right: 30px;margin-top: 20px;display: inline-block;"
                   :type="buttonType" @click="dataShow()">
            <span v-show="!(isShow)">查看数据</span>
            <span v-show="isShow">关闭数据</span>
        </el-button>


        <el-divider/>
        <div class="header" style="font: 15px Extra Small;" >
            问卷内容：
        </div>
        <br>
            <span v-for="(question,index) in questionsPage"
                  :key="question.questionNo">
                第{{question.questionNo}}题
                <span v-if="question.questionType === '1'">
                (单选题)：
                </span>
                 <span v-else-if="question.questionType === '2'">
                (多选题)：
                </span>
                 <span v-else="question.questionType === '3'">
                (问答题)：
                </span>
                <span>{{question.questionTitle}}</span>
                <br/>
                <br/>
 <!--<span v-for="(qq,index) in question.percent" :key="true"></span>-->
                <span v-for="(questionOption,index2) in question.questionOption"
                      style="width: 520px;display: inline-block;">
                    <span v-if="index2+1 === 1">A</span>
                    <span v-if="index2+1 === 2">B</span>
                    <span v-if="index2+1 === 3">C</span>
                    <span v-if="index2+1 === 4">D</span>
                    <span v-if="index2+1 === 5">E</span>
                    <span v-if="index2+1 === 6">F</span>
                    <span> . {{questionOption}}</span>
                    <br/>
                    <el-progress v-show="isShow" style="width: 90%"
                                 :text-inside="true" :stroke-width="21"
                                 :percentage="question.percent[index2]" status="warning"/>
                    <br v-show="!isShow"/>
                </span>
               <el-divider/>
            </span>


        <!--分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="paperData.questions.length">
        </el-pagination>


    </div>
</template>

<script>
    export default {
        name: "ques-detail",
        data(){
            return {
                paperData:[],
                show3: false,
                //分页
                currentPage:1, //初始页
                pageSize:10,    //每页的数据
                //数据显示
                isShow: false,
                buttonType: 'warning',
                }
        },
        created() {
            console.log("this.$route.params==>",this.$route.params);
            this.paperData = this.$route.params;
            console.log("paperData==>",this.paperData);
        },
        methods: {
            // 初始页currentPage、初始每页数据数pageSize和数据data
            handleSizeChange: function (size) {
                this.pageSize = size;
                console.log(this.pageSize)  //每页下拉显示数据
            },
            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
            },
            dataShow(){
                if(this.isShow){
                    this.isShow = false;
                    this.buttonType = 'warning';
                    return;
                }
                this.isShow = true;
                this.buttonType = 'danger';
            }
        },
        computed:{//分页
            questionsPage:function(){
                return this.paperData.questions.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize);
            }
        }
    }
</script>

<style scoped>
    .transition-box {
        margin-bottom: 10px;
        width: 200px;
        height: 100px;
        border-radius: 4px;
        background-color: #409EFF;
        text-align: center;
        color: #fff;
        padding: 40px 20px;
        box-sizing: border-box;
        margin-right: 20px;
    }

    .el-pagination {
        text-align: center;
    }

</style>